<!--
 * @Autor: 王琛
 * @Description: 主页
 * @Copyright: 版权归个人所有
-->
<style lang="stylus" scoped>
#MainApp {
  width: 100%;
  height: 100%;
  position: relative;

  .routingExit {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows:var(--appTopBarHeight) calc(100% - var(--appTopBarHeight));
    grid-template-columns: 100%;
  }


  .MenuBox {
    width: 90%;
    height: var(--BottomMenuHeight);
    position: absolute;
    left: 50%;
    bottom: var(--BottomMenuMarginBottom);
    transform: translate(-50%, -0%);
    border-radius: 8px;
    background: rgba(0, 0, 0, .5) url('') no-repeat center center / 100% 100%;

  }


  .audio_player, .disclaimerIcon, .audio_btn {
    position: absolute;
    top: 0px;
    z-index: 10;
  }

  .audio_btn {
    width: 20px;
    height: 20px;
    position: fixed;
    top: 5%;
    right: 3%;
  }
}
</style>


<template>
  <div id="MainApp">
    <!-- 免责声明组件 -->
    <transition name="animate__animated animate__" enter-active-class="animate__fadeIn" leave-active-class="animate__fadeOut">
      <disclaimerPopup v-if="_data.isDisclaimer" :config="_state.pageDataConfig.disclaimer" @close="_data.isDisclaimer = false"></disclaimerPopup>
    </transition>
    <!-- 路由出口 -->
    <div class="routingExit" :style="{ 'background': `url('${_state.pageDataConfig?.AppBg}') no-repeat center center / 100% 100%`}">
      <router-view v-slot="{ Component }">
        <component :is="Component"/>
      </router-view>
      <Menu class="MenuBox" :MenuList="_state.pageDataConfig?.MenuList || []" :key='_state.pageDataConfig?.MenuList?.length'></Menu>
    </div>
<!--    &lt;!&ndash; 音乐按钮 &ndash;&gt;-->
<!--    <img class="audio_btn" :src="_data.musicPlaying ? getImage('/1.png') : getImage('/2.png') " alt="" srcset="" @click="controlPlayback">-->
<!--    &lt;!&ndash; 音乐播放器 &ndash;&gt;-->
<!--    <audio id="audio_player" class="audio_player" autoplay loop :src="getImage('/1.mp3')"></audio>-->
  </div>
</template>


<script setup lang="ts" name="MainApp">
import {onBeforeMount, onMounted, reactive} from "vue";
import {initWebSocket} from "src/assets/js/UE4/index.js";
import {useMainStore} from "src/pinia/index"
import _axios from "axios";

const _state = useMainStore();

const _data = reactive({
  // 海报动画名称
  animation_poster_name: "",
  // 是否显示导航
  isShowMenu: false,
  // 打开免责声明
  isDisclaimer: true,
  // 底部导航高度
  main_nav_h: 57,
  // 是否手控操作
  isManualControl: false,
  // 音乐播放状态
  musicPlaying: false,
});

onMounted(async () => {

  const pageDataConfig = await _axios.get("./MainConfig.json");

  _state.pageDataConfig = pageDataConfig.data;

  ConnectUE_BusinessCommunication();
  ConnectUE_MouseKeyboardSynchronization();
})

/**
 * @description: 鼠标键盘UE同步事件
 * @author: 王琛
 * @Date: 2024-10-16 10:12:45
 * @param {*}
 * @return {*}
 */
function ConnectUE_MouseKeyboardSynchronization() {
  _state.ueSocketOne = new initWebSocket({
    // @ts-ignore
    ip: _state.pageDataConfig.SocketIp_Business
  })
}

/**
 * @description: UE业务通讯事件
 * @author: 王琛
 * @Date: 2024-10-16 10:31:56
 * @param {*}
 * @return {*}
 */
function ConnectUE_BusinessCommunication() {
  _state.ueSocket = new initWebSocket({
    //@ts-ignore
    ip: _state.pageDataConfig.SocketIp_MouseAndKeyboard,
    message: (data) => {
      // 记录响应的数据
      _state.ueResData = Object.assign(data, {time: new Date().getTime()});
    },
    initFn: [],
    closeAndErrorFn: () => {
      _state.appIsLoading = false;
    }
  });
}

/**
 * @description: 监听window窗口变化
 * @author: 王琛
 * @Date: 2023-07-07 11:50:51
 * @param {*}
 * @return {*}
 */
window.onresize = WindowChanges;

/**
 * @description: 监听window窗口变化
 * @author: 王琛
 * @Date: 2023-07-07 11:50:51
 * @param {*}
 * @return {*}
 */
function WindowChanges() {
  // 获取当前窗口的宽度
  _state.appWindowInfo.width = document.documentElement.clientWidth;
  // 获取当前窗口的高度
  _state.appWindowInfo.height = document.documentElement.clientHeight;
  // 计算出当前窗口的宽高比
  const ratio = _state.appWindowInfo.width / _state.appWindowInfo.height;
  // 判断当前窗口的宽高比
  if (ratio > 1) {
    // 如果宽高比大于1.5的话就是横屏
    _state.appWindowInfo.appOrientation = "landscape";
  } else {
    // 如果宽高比小于1.5的话就是竖屏
    _state.appWindowInfo.appOrientation = "portrait";
  }
}

/**
 * @description: 打开音乐
 * @author: 王琛
 * @Date: 2022-09-28 11:45:53
 * @param {*}
 * @return {*}
 */
function turnOnMusic() {
  if (_data.isManualControl) return;
  document.getElementById("audio_player").play()
  _data.musicPlaying = true;
}

/**
 * @description: 右上角音乐按钮功能
 * @author: 王琛
 * @Date: 2022-09-28 11:52:10
 * @param {*}
 * @return {*}
 */
function controlPlayback() {
  if (!_data.isManualControl) _data.isManualControl = true;
  _data.musicPlaying = !_data.musicPlaying
  const el = document.getElementById("audio_player");
  _data.musicPlaying ? el.play() : el.pause();
}
</script>
